<script setup lang="ts">
// 静态引入所有图片
import timeIcon from '@/assets/largescreen/time-icon.png';
import adssIcon from '@/assets/largescreen/adss-icon.png';
import userIcon from '@/assets/largescreen/user-icon.png';
import phoneIcon from '@/assets/largescreen/phone-icon.png';
import homeIcon from '@/assets/largescreen/home-icon.png';
import zhuguanIcon from '@/assets/largescreen/zhuguan-icon.png';
import generalIcon from '@/assets/largescreen/general-icon.png';
import { useAssistStore } from '@/store/modules/Assist/useAssistStore';

const { warningInfo } = storeToRefs(useAssistStore());

const infoItems = computed(() => [
  { icon: timeIcon, label: '发生时间', value: warningInfo.value.createTime, key: 'createTime' },
  { icon: timeIcon, label: '持续时间', value: warningInfo.value.durationTime, key: 'durationTime' },
  { icon: adssIcon, label: '位置', value: warningInfo.value.occurrenceAddress, key: 'occurrenceAddress' },
  { icon: userIcon, label: '报告人', value: warningInfo.value.reportUser, key: 'reportUser' },
  { icon: phoneIcon, label: '报告人联系方式', value: warningInfo.value.reportTel, key: 'reportTel' },
  { icon: homeIcon, label: '责任公司', value: warningInfo.value.liabilityCompany, key: 'liabilityCompany' },
  { icon: zhuguanIcon, label: '责任主管', value: warningInfo.value.liabilityUser, key: 'liabilityUser' },
  {
    icon: phoneIcon,
    label: '责任主管联系方式',
    value: warningInfo.value.liabilityUserPhone,
    key: 'liabilityUserPhone'
  },
  { icon: generalIcon, label: '概况', value: warningInfo.value.waringContent, key: 'waringContent' }
]);
</script>

<template>
  <div class="warning-info-container">
    <div v-for="(item, index) in infoItems" :key="index" class="info-item" :class="{ 'full-width': index === infoItems.length - 1 }">
      <img :src="item.icon" :alt="item.label" class="info-icon" />
      <div class="info-content">
        <div class="info-label">{{ item.label }}</div>
        <div class="info-value" :title="item.value">
          {{ item.value || '暂无' }}
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.warning-info-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  background-image: url(@/assets/largescreen/blue-kuang.png);
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  padding: 1.25rem;
  box-sizing: border-box;
}

.info-item {
  display: flex;
  align-items: flex-start;
  width: calc(50% - 0.5rem);

  &.full-width {
    width: 100%;
  }
}

.info-icon {
  width: 2.625rem;
  height: 2.625rem;
  flex-shrink: 0;
  margin-right: 0.75rem;
}

.info-content {
  flex: 1;
  min-width: 0; // 防止flex布局溢出
}

.info-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: white;
  margin-bottom: 0.5rem;
}

.info-value {
  font-size: 1rem;
  font-weight: 700;
  color: #00ffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
</style>
